<!-- PerformanceDialog.vue -->
<template>
  <!-- 压测配置弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="性能压测配置"
    width="500px"
    :close-on-click-modal="false"
    @closed="onClosed"
  >
    <el-form label-width="120px" size="small">
      <!-- 并发用户数 -->
      <el-form-item label="并发用户数" required>
        <el-input-number
          v-model="config.concurrent_users"
          :min="1"
          :max="100"
          controls-position="right"
          class="w-full"
        />
        <div class="form-tip">模拟多少个用户同时发起请求</div>
      </el-form-item>

      <!-- 总请求数 -->
      <el-form-item label="总请求数" required>
        <el-input-number
          v-model="config.num_requests"
          :min="1"
          :max="10000"
          controls-position="right"
          class="w-full"
        />
        <div class="form-tip">建议设置为并发数的整数倍</div>
      </el-form-item>

      <!-- 请求间隔 -->
      <el-form-item label="请求间隔（秒）">
        <el-input-number
          v-model="config.delay_between_requests"
          :step="0.1"
          :min="0"
          :max="10"
          controls-position="right"
          class="w-full"
        />
        <div class="form-tip">0 表示尽可能快；0.5 表示每 500ms 发一次请求</div>
      </el-form-item>
    </el-form>

    <!-- 按钮区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="startBenchmark" :loading="loading"> 开始压测 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/services/api' // 你的 axios 封装

// 定义 props 和 emit
const props = defineProps({
  modelValue: Boolean, // 控制显示
  testCase: Object, // 当前测试用例数据
})

const emit = defineEmits(['update:modelValue', 'success'])

// Dialog 显示控制
const dialogVisible = ref(false)
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val
  },
)
watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})

// 压测配置表单
const config = reactive({
  concurrent_users: 5,
  num_requests: 100,
  delay_between_requests: 0.1,
})

const loading = ref(false)

// 开始压测
const startBenchmark = async () => {
  if (!props.testCase?.id) {
    ElMessage.error('无效的测试用例')
    return
  }

  loading.value = true

  try {
    console.log('config', config)
    const response = await api.post(`/test-cases/${props.testCase.id}/execute/`, {
      benchmark_config: { ...config },
    })

    ElMessage.success('压测已启动！')
    emit('success', response.data) // 返回报告或结果
    dialogVisible.value = false
  } catch (error) {
    const msg = error.response?.data?.error || '压测失败，请稍后重试'
    ElMessage.error(msg)
  } finally {
    loading.value = false
  }
}

// Dialog 关闭后重置状态
const onClosed = () => {
  config.concurrent_users = 5
  config.num_requests = 100
  config.delay_between_requests = 0.1
}
</script>

<style scoped>
.w-full {
  width: 100%;
}
.form-tip {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
.dialog-footer {
  text-align: right;
  padding-top: 10px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
